<template>
    <div>
        <label class="checkbox">
            <input
                class="checkbox-input"
                type="checkbox"
                v-model="isChecked"
                :disabled="onSale == 0&&isEdit==false?'disabled':false"
                @change="select"
            />
            <span></span>
        </label>
    </div>
</template>

<script>
export default {
    name: 'CommonCheckbox',
    props: [
        'checked',
        'selectType',
        'selectId',
        'selectNum',
        'onSale',
        'isEdit'
    ],
    data() {
        return {
            isChecked: this.checked
        }
    },
    watch: {
        checked: {
            handler: function(val, oldVal) {
                this.isChecked = val
            }
        }
    },
    methods: {
        select() {
            this.$emit('select', {
                checked: this.isChecked,
                selectType: this.selectType,
                selectNum: this.selectNum,
                selectId: this.selectId
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.checkbox
    position relative
    display block
    width 0.42rem
    height 0.42rem
    .checkbox-input
        position absolute
        top 0
        left 0
        width 0.42rem
        height 0.42rem
        appearance none
        -webkit-appearance none
        outline none
        opacity 0
    .checkbox-input+span
        display inline-block
        width 0.42rem
        height 0.42rem
        background-image url('../assets/images/cart/off.png')
        background-repeat no-repeat
        background-size 100% 100%
    .checkbox-input:checked+span
        background-image url('../assets/images/cart/on.png')
</style>


